<template>
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :options="options" :columns="columns" ref="crudRef" :isTotal='isTotal'>
        <template #operationBeforeExtend="{ record }">
            <a-link @click='handlethrough(record)'> 通行记录</a-link>
        </template>
      </ma-crud>
      <a-drawer :footer="false" :width="1400" v-model:visible="throughShow">
        <template #title> 通行记录 </template>
        <through ref="throughRef" :plateNo="plateNo" v-if="throughShow"/>
      </a-drawer>
    </div>
  </template>
  <script setup>
  import { ref, reactive } from 'vue'
  import predictionBoxManage from '@/api/prediction/predictionBoxManage'
  import through from '../through/through.vue'
  import { Message } from '@arco-design/web-vue'
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  
  const crudRef = ref()
  const isTotal = ref(true)
  const plateNo = ref(null)
  const throughShow = ref(false)
  
  const numberOperation = (newValue, id, numberName) => {
    predictionBoxManage.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  
  const switchStatus = (statusValue, id, statusName) => {
    predictionBoxManage.changeStatus({ id, statusName, statusValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  const handlethrough = (row)=>{
    console.log(row)
    plateNo.value = row.plateNo
    throughShow.value = true
  }
  
  const options = reactive({
    id: 'flyos_prediction_barrier_management',
    rowSelection: {
      showCheckedAll: true
    },
    pk: 'id',
    operationColumn: true,
    operationColumnWidth: 210,
    pageSize:50,
    pageSizeOption:[50,100,200],
    formOption: {
      viewType: 'modal',
      width: 600
    },
    api: predictionBoxManage.getPmsList,
    add: {
      show: true,
      api: predictionBoxManage.getPmsSave,
      
    },
    edit: {
      show: true,
      text: '修改',
      barrier:true,
      api: predictionBoxManage.getPmsSave,
    },
    delete: {
      show: true,
      barrier:true,
      api: predictionBoxManage.getPmsdelete,
    },
    recovery: {
      show: false,
      api: predictionBoxManage.recoverys,
      auth: ['prediction:boxManage:recovery']
    },
    import: {
      show: false,
      url: 'prediction/boxManage/import',
      templateUrl: 'prediction/boxManage/downloadTemplate',
      auth: ['prediction:boxManage:import']
    },
    export: {
      show: false,
      url: 'prediction/boxManage/export',
      auth: ['prediction:boxManage:export']
    },
    beforeEdit:(data)=>{
        console.log(data)
        return true
    }
  })
  
  const columns = reactive([
    {
      title: "",
      dataIndex: "id",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      commonRules: {
        required: true,
        message: "请输入"
      }
    },
    {
      title: "人员名称",
      dataIndex: "name",
      formType: "input",
      width:140,
      commonRules:{
        required:true,
        message: "请输入人员名称"
      }
    },
    {
      title: "人员联系方式",
      dataIndex: "phone",
      formType: "input",
      width:140,
      commonRules:{
        required:true,
        message: "请输入人员联系方式",
        maxLength:11,
      }
    },
    {
      title: "车牌号码",
      dataIndex: "plateNo",
      formType: "input",
      search:true,
      width:140,
      commonRules:{
        required:true,
        message: "请输入车牌号码"
      }
    },
    
    {
      title: "车卡有效期开始时间",
      dataIndex: "beginTime",
      formType: "date",
      showTime: true,
      commonRules:{
        required:true,
        message: "请选择车卡有效期开始时间"
      }
    },
    {
      title: "车卡有效期结束时间",
      dataIndex: "endTime",
      formType: "date",
      showTime: true,
      commonRules:{
        required:true,
        message: "请选择车卡有效期结束时间"
      }
    },
    {
      title: "车卡创建或修改时间",
      dataIndex: "createTime",
      formType: "date",
      addDisplay:false,
      editDisplay:false,
      showTime: true
    },
    {
      title: "更新者",
      dataIndex: "updated_by",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    }
  ])
  </script>
  <script> export default { name: 'prediction:barrier_management' } </script>